<template>
	<view style="position: absolute; background-color: #000000;">
		<view :style="{transform: `scale(1,${tipZoom})`}" class="tool-tip" id="tool-tip">
			<view style="width: 160rpx; height: 200rpx; border-radius: 10rpx; background-color: #F5F5F5; z-index: 200; position: absolute;">
				<view v-for="(item,index) in tipsList" :key="index">
					<view @touchstart="tap(item)" @tap="changeTap(item,index)" style="width: 100%; line-height: 99rpx; text-align: center;">
						{{item.title}}
						<view :class="item.isTaping ? 'tapAnm' : ''" style="position: absolute; top: 0; left: 0;height: 99rpx; "></view>
					</view>
					<view v-if="index < tipsList.length-1" style="width: 80%; margin: 0 auto; background-color: #808080; height: 2rpx;"></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			tips: {
				default: [{
					name: '未填写',
					tap: function() {

					}
				}]
			}
		},
		computed: {
			tipsList: {
				get() {
					var arr = []
					this.tips.forEach(e => {
						// console.log(e) 
						arr.push({
							...e,
							isTaping: false
						})
					})
					return arr
				}
			},
			tipZoom: {
				
				get() {
					return this.zoom
				},
				set(newValue) {
					this.zoom = newValue
				}
			}
		},
		onLoad() {
			console.log(this.tips[0].tap)
			console.log('121321321321')
		},
		data() {
			return {
				title: '按名字',
				isTap: false,
				zoom: 0
			}
		},
		methods: {
			changeTap(item,index) {
				console.log(this.tipZoom)
				item.isTaping = true
				this.tipZoom = 0
				this.$emit("changeTap",{item,index})
				
			},
			tap(item) {
				item.isTaping = false
			},
			show(){
				console.log("1231213")
				this.zoom = this.zoom == 1?0:1;
			}
		}
	}
</script>
<style>
	.tool-tip {
		transition: transform 0.1s;
		transform-origin: top right;
		box-shadow: 0 0 10rpx #808080;
		border-radius: 10rpx;
		position: absolute;
		left: 0;
		top: 0;
		width: 160rpx;
		height: 200rpx;
		background-color: #F5F5F5;
	}

	.tool-tip::before {
		position: absolute;
		z-index: 150;
		transform: translate(-50%, -30%) rotate(-45deg);
		box-shadow: 0 0 10rpx #808080;
		left: 50%;
		content: "";
		border-top: 20rpx solid #F5F5F5;
		border-left: 20rpx solid rgb(0, 0, 0, 0);
		border-right: 20rpx solid #F5F5F5;
		border-bottom: 20rpx solid rgb(0, 0, 0, 0);
		width: 0rpx;
		height: 0rpx;
		display: block;
	}

	.tapAnm {
		animation: tapTip 1s;
	}

	@keyframes tapTip {
		from {
			width: 160rpx;
			transform: scale(0, 1);
			background: rgb(88, 88, 88, 0.5);
			border-radius: 50rpx;
		}

		to {
			width: 160rpx;
			transform: scale(1, 1);
			background: rgb(88, 88, 88, 0);
			border-radius: 50rpx;
		}
	}

	.in-anm {
		animation: in 1s;
	}

	@keyframes in {
		from {
			transform: translate(-20%, 0);
			opacity: 0;
		}

		to {
			transform: translate(0, 0);
			opacity: 1;
		}
	}
</style>
